<template>
  <div class="node-manage">
    <div class="side-bar">
      <b-button
        id="add-node"
        class="btn"
        size="sm"
        :variant="currentOp === 'add' ? 'primary' : 'outline-primary'"
        squared
        @click="openAddNodeModal"
      >
        <i class="el-icon-plus"></i>
        <b-tooltip target="add-node" placement="right">添加节点</b-tooltip>
      </b-button>
      <b-button
        id="del-node"
        class="btn"
        size="sm"
        :variant="currentOp === 'del' ? 'primary' : 'outline-primary'"
        squared
        @click="openDelNodeModal"
      >
        <i class="el-icon-minus"></i>
        <b-tooltip target="del-node" placement="right">删除节点</b-tooltip>
      </b-button>
    </div>
    <!-- main 区域 -->
    <div class="main">
      <el-table
        :data="nodeList"
        style="width: 100%"
        :height="tableHeight"
        @selection-change="selectRow"
      >
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <!-- 节点ID -->
        <el-table-column prop="id" label="ID" />
        <!-- 节点名称 -->
        <el-table-column prop="name" label="节点名称">
          <template slot-scope="scope">
            <el-button v-if="scope.row.edit === false" type="text" @click="openVisualEchart(scope.row)">{{ scope.row.name }}</el-button>
            <b-input style="margin: 3px; width: 150px" v-else size="sm" v-model="editForm.name"></b-input>
          </template>
        </el-table-column>
        <!-- 节点类型 -->
        <el-table-column prop="type" label="节点标签(类型)">
          <template slot="header" slot-scope="{}">
            <span style="margin-right: 5px">节点类型</span>
            <el-select
              v-model="getListParams.type"
              filterable
              placeholder="请选择"
              size="mini"
              class="table-node-type"
              @change="changeNodeType"
            >
              <el-option
                v-for="(item, $index) in nodeTypeList"
                :key="$index"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </template>
          <template slot-scope="scope">
            <span v-if="scope.row.edit === false">{{ scope.row.type.join(', ') }}</span>
            <el-select
              v-else
              size="mini"
              v-model="editForm.type"
              multiple
              filterable
              allow-create
              collapse-tags
              default-first-option
              placeholder="请选择"
              @focus="remoteSearchNodeTypeList"
              :loading="selectLoading"
            >
              <el-option
                v-for="(item, $index) in searchNodeTypeList"
                :key="$index"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <!-- 前驱节点 -->
        <el-table-column prop="prevNodeList" label="前驱节点(关系)">
          <template slot-scope="scope">
            <div v-if="scope.row.prevNodeList.length === 0">无</div>
            <div
              v-else-if="scope.row.prevNodeList.length <= 3"
              v-for="(item, $index) in scope.row.prevNodeList"
              :key="$index"
            >
              {{ item.prevNode.name }}( {{ item.relation.type }} )
            </div>
            <div
              v-else
              v-for="(item, $index) in [
                ...scope.row.prevNodeList.slice(0, 3),
                {
                  relation: {
                    type: '...'
                  },
                  prevNode: {
                    id: Date.now(),
                    name: '...'
                  }
                }
              ]"
              :key="$index"
            >
              {{ item.prevNode.name }}( {{ item.relation.type }} )
            </div>
          </template>
        </el-table-column>
        <!-- 后继节点 -->
        <el-table-column prop="backNodeList" label="后继节点(关系)">
          <template slot-scope="scope">
            <div v-if="scope.row.backNodeList.length === 0">无</div>
            <div
              v-else-if="scope.row.backNodeList.length <= 3"
              v-for="(item, $index) in scope.row.backNodeList"
              :key="$index"
            >
              {{ item.backNode.name }}( {{ item.relation.type }} )
            </div>
            <div
              v-else
              v-for="(item, $index) in [
                ...scope.row.backNodeList.slice(0, 3),
                {
                  relation: {
                    type: '...'
                  },
                  backNode: {
                    id: Date.now(),
                    name: '...'
                  }
                }
              ]"
              :key="$index"
            >
              {{ item.backNode.name }}( {{ item.relation.type }} )
            </div>
          </template>
        </el-table-column>

        <!-- 操作 -->
        <el-table-column label="操作">
          <template slot="header" slot-scope="scope">
            <el-input
              style="margin: 3px 0px"
              v-model="getListParams.keywords"
              size="small"
              placeholder="输入关键字搜索(Enter)"
              @keyup.native.enter="search(scope)"
            />
          </template>
          <template slot-scope="scope">
            <b-button
              v-if="scope.row.edit === false"
              style="margin: 3px 0px; text-decoration: none"
              size="sm"
              variant="link"
              @click="openEditMode(scope.$index, scope.row)"
            >编辑</b-button>
            <b-button
              v-if="scope.row.edit === true"
              style="margin: 3px; text-decoration: none"
              size="sm"
              variant="link"
              @click="confirmEdit(scope.$index, scope.row)"
            >确认</b-button>
            <b-button
              v-if="scope.row.edit === true"
              style="margin: 3px; text-decoration: none"
              size="sm"
              variant="link"
              @click="cancelEdit(scope.$index, scope.row)"
            >取消</b-button>
            <b-button
              v-if="!scope.row.edit"
              style="margin: 3px 0px; text-decoration: none; color: #dc3545"
              size="sm"
              variant="link"
              @click="openDelSingleNodeModal(scope.$index, scope.row)"
            >删除</b-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-pagination
        style="margin-top: 15px"
        background
        layout="prev, pager, next"
        @current-change="changePage"
        :total="totalNodeCount">
      </el-pagination>
    </div>
    <!-- 新增节点的弹窗 -->
    <!-- 1 节点本身的属性 -->
    <!--  1.1 name 用户手动输入 -->
    <!--  1.2 type 可多选 支持创建不存在type -->
    <!-- 2 节点的关系 -->
    <!--  2.1 节点的前驱节点 可多选 不可创建 与前驱节点的关系 可多选 支持创建 -->
    <!--  2.2 节点的后继节点 可多选 不可创建 与后继节点的关系 可多选 支持创建 -->
    <b-modal
      v-model="addNodeModal"
      title="新增节点"
    >
      <!-- 弹框内容 -->
      <div class="add-dialogue dialogue">
        <div class="title"><div class="con">属性</div></div>
        <div class="form-line flex-sp-ar">
          <div class="label" style="font-size: 13px">节点名</div>
          <div class="form-item">
            <el-input
              style="font-size: 13px; width: 300px"
              placeholder="请输入节点名"
              size="small"
              v-model="newNode.name"
            ></el-input>
          </div>
        </div>
        <div class="form-line flex-sp-ar">
          <div class="label" style="font-size: 13px">类型(标签)</div>
          <div class="form-item">
            <el-select
              style="width: 300px"
              size="small"
              v-model="newNode.type"
              multiple
              filterable
              allow-create
              default-first-option
              @focus="remoteSearchNodeTypeList"
              :loading="selectLoading"
              placeholder="请选择(可多选，支持创建不存在标签)"
            >
              <el-option
                v-for="(item, $index) in searchNodeTypeList"
                :key="$index"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </div>
        </div>
        <!-- 前驱节点列表 -->
        <div class="title" style="margin-top: 10px"><div class="con">前驱(可选)</div></div>
        <el-table
          size="mini"
          :data="newNode.prevNodeList"
          style="width: 100%"
          max-height="250">
          <el-table-column
            fixed
            prop="id"
            label="节点名"
          >
            <template slot-scope="scope">
              <el-select
                size="mini"
                v-model="scope.row.id"
                filterable
                remote
                reserve-keyword
                placeholder="关键词(不支持创建)"
                :remote-method="remoteSearchPreNodeList"
                :loading="selectLoading">
                <el-option
                  v-for="(item, $index) in searchPreNodeList"
                  :key="$index"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            prop="relationType"
            label="关系名"
            width="200"
          >
            <template slot-scope="scope">
              <el-select
                size="mini"
                collapse-tags
                v-model="scope.row.relationType"
                multiple
                filterable
                allow-create
                placeholder="关键词(支持创建关系)"
                @focus="remoteSearchRelationTypeList"
                :loading="selectLoading">
                <el-option
                  v-for="(item, $index) in searchRelationTypeList"
                  :key="$index"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="80">
            <template slot="header" slot-scope="scope">
              <el-button
                size="small"
                type="text"
                @click.native.prevent="addNodeListRow(scope.$index, newNode.prevNodeList)"
              >新增</el-button>
            </template>
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="deleteNodeListRow(scope.$index, newNode.prevNodeList)"
                type="text"
                size="small"
              >
                <span style="color: #f56c6c">移除</span>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 后继 -->
        <div class="title" style="margin-top: 10px"><div class="con">后继(可选)</div></div>
        <el-table
          size="mini"
          :data="newNode.backNodeList"
          style="width: 100%"
          max-height="250">
          <el-table-column
            prop="id"
            label="节点名"
          >
            <template slot-scope="scope">
              <el-select
                size="mini"
                v-model="scope.row.id"
                filterable
                remote
                reserve-keyword
                placeholder="关键词(不支持创建)"
                :remote-method="remoteSearchBackNodeList"
                :loading="selectLoading">
                <el-option
                  v-for="(item, $index) in searchBackNodeList"
                  :key="$index"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            prop="relationType"
            label="关系名"
            width="200"
          >
            <template slot-scope="scope">
              <el-select
                size="mini"
                collapse-tags
                v-model="scope.row.relationType"
                multiple
                filterable
                allow-create
                placeholder="关键词(支持创建关系)"
                @focus="remoteSearchRelationTypeList"
                :loading="selectLoading">
                <el-option
                  v-for="(item, $index) in searchRelationTypeList"
                  :key="$index"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="80">
            <template slot="header" slot-scope="scope">
              <el-button
                size="small"
                type="text"
                @click.native.prevent="addNodeListRow(scope.$index, newNode.backNodeList)"
              >新增</el-button>
            </template>
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="deleteNodeListRow(scope.$index, newNode.backNodeList)"
                type="text"
                size="small"
              >
                <span style="color: #f56c6c">移除</span>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 底部配置 -->
      <template slot="modal-footer">
        <div style="height: 40px; width: 40%" class="flex-right-center">
          <b-button
            variant="primary"
            @click="confirmAddNode"
            style="font-size: 14px; margin-right: 10px"
            size="sm"
          >确定</b-button>
          <b-button
            variant="outline-danger"
            @click="cancelAddNode"
            style="font-size: 14px"
            size="sm"
          >取消</b-button>
        </div>
      </template>
      <!-- 头部配置 -->
      <template slot="modal-header">
        <div class="header flex-left-center" style="font-size: 18px">新增节点</div>
      </template>
    </b-modal>
    <!-- 可视化弹框 -->
    <!-- 添加关系类型的弹框 -->
    <b-modal
      id="visual-modal"
      size="lg"
      no-stacking
      v-model="showVisualModal"
    >
      <div style="width: 100%; height: 500px;">
        <VisualChart :chartData="visualData" />
      </div>
      <!-- 底部配置 -->
      <template slot="modal-footer">
        <div style="height: 40px; width: 40%" class="flex-right-center">
          <b-button variant="primary" @click="closeVisualModal" style="font-size: 14px; margin-right: 10px">确定</b-button>
        </div>
      </template>
      <!-- 头部配置 -->
      <template slot="modal-header">
        <div class="header flex-left-center">节点关系图谱（{{ visualData.name }}）</div>
      </template>
    </b-modal>
  </div>
</template>

<script>
import { clone, getLimitText } from '@/util'
import { getNodeList, getNodeInfo, updateNodeInfo, addNode, deleteNodeList } from '@/api/node'
import { getNodeTypes, getRelationTypesV2, getNodeTypesV2 } from '@/api/type'
import { mapActions } from 'vuex'

// 节点管理的表格字段
// 节点名称 节点标签(类型) 前驱节点 后继节点
//    √        ×            √       √
export default {
  components: {
    VisualChart: () => import('@/components/node-manage/VisualChart.vue')
  },
  data () {
    return {
      // echart数据
      visualData: {},
      // 是否显示图谱
      showVisualModal: false,
      // 计时器
      timer: null,
      // 用于搜索选择的节点类型
      searchNodeTypeList: [],
      // 用于搜索选择的关系列表
      searchRelationTypeList: [],
      // 用于搜索选择的前驱节点列表
      searchPreNodeList: [],
      // 用于搜索选择的后继节点列表
      searchBackNodeList: [],
      // 获取节点列表的参数
      getListParams: {
        page: 1,
        records: 10,
        keywords: '',
        type: 'all'
      },
      // 搜索框的局部loading
      selectLoading: false,
      // 全局loading
      loading: false,
      // 表格的高度
      tableHeight: window.innerHeight - 130,
      // 控制新增节点的弹框
      addNodeModal: false,
      // 当前的操作
      currentOp: 'add',
      // 选中的节点
      selected: [],
      // 编辑的节点
      editForm: {
        name: '',
        type: []
      },
      // 节点类型的列表
      nodeTypeList: [
        { label: '全部', value: 'all' }
      ],
      // 节点的总数
      totalNodeCount: 0,
      // 搜索总数
      searchTotalNodeCount: -1,
      // 节点列表
      nodeList: [],
      // 新增的节点
      newNode: {
        name: '',
        type: [],
        prevNodeList: [],
        backNodeList: []
      }
    }
  },
  mounted () {
    // 获取节点
    this.search()
    // 获取节点类型
    getNodeTypes().then(res => {
      console.log(res)
      this.nodeTypeList.push(...res.data.map(item => {
        return {
          label: item,
          value: item
        }
      }))
    })
  },
  methods: {
    ...mapActions(['logoutService']),
    closeVisualModal () {
      this.showVisualModal = false
      this.visualData = {}
    },
    // 打开可视化弹框
    openVisualEchart (row) {
      console.log(row)
      this.showVisualModal = true
      this.visualData = row
    },
    // 选中多行
    selectRow (val) {
      this.selected = val
      console.log(this.selected, 'selected row')
    },
    // 增加表格的行
    addNodeListRow (_index, nodeList) {
      const lastNode = nodeList[nodeList.length - 1]
      if (lastNode && (lastNode.id === '' || lastNode.relationType.length === 0)) {
        this.$message.warning('存在未填写表格')
        return false
      }
      nodeList.push({
        id: '',
        relationType: []
      })
    },
    // 删除节点表格的行
    deleteNodeListRow (index, nodeList) {
      console.log('delete preNode list row')
      nodeList.splice(index, 1)
    },
    // 远程搜索节点类型列表下拉框
    remoteSearchNodeTypeList () {
      this.selectLoading = true
      getNodeTypesV2().then(res => {
        this.selectLoading = false
        if (res.status === 'fail') {
          this.$message.warning(res.msg)
          return false
        }
        this.searchNodeTypeList = res.data
      })
    },
    // 远程搜索关系类型列表下拉框
    remoteSearchRelationTypeList () {
      this.selectLoading = true
      getRelationTypesV2().then(res => {
        this.selectLoading = false
        if (res.status === 'fail') {
          this.$message.warning(res.msg)
          return false
        }
        this.searchRelationTypeList = res.data
      })
    },
    // 远程搜索前驱节点列表下拉框
    remoteSearchPreNodeList (query) {
      let reserve = this.newNode.prevNodeList.filter(node => node.id !== '')
      if (reserve.length !== 0) {
        reserve = reserve.map(node => {
          return {
            id: node.id,
            name: this.searchBackNodeList.filter(n => n.id === node.id)[0].name
          }
        })
      }
      if (query === '') {
        this.searchPreNodeList = [...reserve]
        return false
      }
      this.selectLoading = true
      getNodeList({
        page: 1,
        records: this.searchTotalNodeCount,
        keywords: query,
        type: 'all'
      }).then(res => {
        this.selectLoading = false
        this.searchPreNodeList = res.data.nodeList.map(item => {
          return {
            name: `${getLimitText(item.name, 20)}(${item.labels.join(',')})`,
            id: item._id
          }
        })
        // 过滤掉已经包含的
        const ids = this.searchPreNodeList.map(n => n.id)
        reserve = reserve.filter(n => !ids.includes(n.id))
        this.searchPreNodeList = this.searchPreNodeList.concat(reserve)
        console.log(this.searchPreNodeList);
      })
    },
    // 远程搜索后继节点列表下拉框
    remoteSearchBackNodeList (query) {
      let reserve = this.newNode.backNodeList.filter(node => node.id !== '')
      if (reserve.length !== 0) {
        reserve = reserve.map(node => {
          return {
            id: node.id,
            name: this.searchBackNodeList.filter(n => n.id === node.id)[0].name
          }
        })
      }
      if (query === '') {
        this.searchBackNodeList = [...reserve]
        return false
      }
      this.selectLoading = true
      getNodeList({
        page: 1,
        records: 500,
        keywords: query,
        type: 'all'
      }).then(res => {
        this.selectLoading = false
        console.log(res, 'remote')
        this.searchBackNodeList = res.data.nodeList.map(item => {
          return {
            name: `${getLimitText(item.name, 20)}(${item.labels.join(',')})`,
            id: item._id
          }
        })
        // 过滤掉已经包含的
        const ids = this.searchBackNodeList.map(n => n.id)
        reserve = reserve.filter(n => !ids.includes(n.id))
        console.log(reserve, '保留数组')
        this.searchBackNodeList = this.searchBackNodeList.concat(reserve)
      })
    },
    // 翻页
    changePage (page) {
      this.getListParams.page = page
      this.search()
    },
    // 搜索节点列表
    search (scope) {
      this.loading = this.$loading({
        text: '正在查询节点数据...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      getNodeList(this.getListParams).then(res => {
        this.loading.close()
        if (res.status === 'fail') {
          this.$message.warning(res.msg)
          // if (res.msg === '没有访问权限') {
          //   // 这里进行注销操作
          //   this.loading = this.$loading({
          //     text: '正在跳转登录...',
          //     spinner: 'el-icon-loading',
          //     background: 'rgba(0, 0, 0, 0.7)'
          //   })
          //   this.logoutService().then(() => {
          //     this.loading.close()
          //     this.$router.push('/home')
          //   })
          // }
          return false
        }
        console.log(res, 'nodes')
        const data = res.data
        this.totalNodeCount = data.total
        if (this.searchTotalNodeCount === -1) {
          this.searchTotalNodeCount = data.total
        }
        this.nodeList = data.nodeList.map(node => {
          return {
            id: node._id,
            name: node.name,
            type: ['加载中...'],
            prevNodeList: [
              {
                prevNode: {
                  id: '001',
                  name: '加载中...',
                  type: ['加载中...']
                },
                relation: {
                  id: '011',
                  type: '加载中...'
                }
              }
            ],
            backNodeList: [
              {
                backNode: {
                  id: '002',
                  name: '加载中...',
                  type: ['加载中...']
                },
                relation: {
                  id: '022',
                  type: '加载中...'
                }
              }
            ],
            edit: false
          }
        })
        // 这里开始请求每个节点的详细信息及其关系网络
        Promise.all(this.nodeList.map(node => {
          return getNodeInfo({ nodeId: node.id })
        })).then(nodeInfos => {
          console.log(nodeInfos)
          for (let i = 0; i < this.nodeList.length; i++) {
            // type 赋值
            this.nodeList[i].type = nodeInfos[i].data.curNode.type
            // 前驱节点赋值
            this.nodeList[i].prevNodeList = nodeInfos[i].data.prevNodeList
            // 后继节点赋值
            this.nodeList[i].backNodeList = nodeInfos[i].data.backNodeList
          }
          this.$set(this, 'nodeList', this.nodeList)
        })
        // console.log(res)
      })
    },
    // 改变节点的类型
    changeNodeType (v) {
      this.getListParams.page = 1
      this.search()
    },
    // 切换成编辑模式
    // 1.深度克隆行对象
    // 2.编辑置为true
    openEditMode (_index, row) {
      console.log('切换成编辑模式')
      this.editForm = clone(row)
      row.edit = true
    },
    // 确认修改
    confirmEdit (index, row) {
      console.log('确认修改')
      this.loading = this.$loading({
        lock: true,
        text: '请稍后...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      // console.log(this.editForm)
      const data = {
        id: row.id,
        name: this.editForm.name,
        type: this.editForm.type,
        oldType: row.type
      }
      updateNodeInfo(data).then(resp => {
        this.loading.close()
        if (resp.status === 'fail') {
          this.$message.warning(resp.msg)
          return false
        }
        row.name = this.editForm.name
        row.type = this.editForm.type
        row.edit = false
        this.$message.success(resp.msg)
      })
    },
    // 取消修改
    cancelEdit (_index, row) {
      console.log('取消修改')
      this.$message.info('操作已取消')
      row.edit = false
    },
    // 打开单个删除的模态框
    openDelSingleNodeModal (_index, row) {
      this.$confirm('此操作将永久删除该节点与关系，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = this.$loading({
          lock: true,
          text: '正在删除...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        deleteNodeList({ ids: [row.id] }).then(res => {
          this.loading.close()
          if (res.status === 'fail') {
            this.$message.warning(res.msg)
          } else {
            this.$message.success(res.msg)
          }
          this.search()
        })
      }).catch(() => {
        this.$message.warning('操作已取消')
      })
    },
    // 打开新增节点的弹窗
    openAddNodeModal () {
      this.currentOp = 'add'
      this.addNodeModal = true
      console.log('打开了新增节点的弹窗')
    },
    // 取消新增节点
    cancelAddNode () {
      this.addNodeModal = false
    },
    // 重置添加节点的表单
    resetAddNodeForm () {
      this.newNode = {
        name: '',
        type: [],
        prevNodeList: [],
        backNodeList: []
      }
    },
    // 确认新增节点
    confirmAddNode () {
      // 判断节点名是否为空
      if (this.newNode.name === '') {
        this.$message.warning('节点名不可以为空')
        return false
      }
      // 判断节点类型是否为空
      if (this.newNode.type.length === 0) {
        this.$message.warning('节点类型不可以为空')
        return false
      }
      // 如果前驱节点列表不为空 判断前驱节点列表的最后一个节点是否缺少信息
      if (this.newNode.prevNodeList.length !== 0) {
        const lastPreNode = this.newNode.prevNodeList[this.newNode.prevNodeList.length - 1]
        if (lastPreNode.id === '' || lastPreNode.relationType.length === 0) {
          this.$message.warning('前驱节点列表存在未填写内容')
          return false
        }
      }
      // 判断后继节点列表的最后一个节点是否缺少信息
      if (this.newNode.backNodeList.length !== 0) {
        const lastBackNode = this.newNode.backNodeList[this.newNode.backNodeList.length - 1]
        if (lastBackNode.id === '' || lastBackNode.relationType.length === 0) {
          this.$message.warning('后继节点列表存在未填写内容')
          return false
        }
      }
      console.log(this.newNode, 'new node')
      this.loading = this.$loading({
        text: '正在添加...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      addNode(this.newNode).then(res => {
        this.loading.close()
        console.log(res)
        if (res.status === 'success') {
          this.$message.success(res.msg)
        } else {
          this.$message.warning(res.msg)
        }
        this.cancelAddNode()
        this.search()
        this.resetAddNodeForm()
      })
    },
    openDelNodeModal () {
      this.currentOp = 'del'
      if (this.selected.length === 0) {
        this.$message.warning('未选择任何节点')
        return false
      }
      console.log(this.selected.map(node => node.id));
      this.$confirm('此操作将永久删除选中节点与关系，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = this.$loading({
          lock: true,
          text: '正在删除...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        deleteNodeList({
          ids: this.selected.map(node => node.id)
        }).then(res => {
          this.loading.close()
          if (res.status === 'fail') {
            this.$message.warning(res.msg)
          } else {
            this.$message.success(res.msg)
          }
          this.search()
        })
      }).catch(() => {
        this.$message.warning('操作已取消')
      })
    },
    openUpdateNodeModal () {
      this.currentOp = 'update'
      console.log('openUpdateNodeModal')
    }
  }
}
</script>

<style lang="stylus" scoped>
.open-text
  &:hover
    text-decoration: under-line
.node-manage
  width: 100%
  height: calc(100% - 60px)
  background-color: #fff
  overflow: hidden
  display: flex
.side-bar
  width: 60px
  height: 100%
  box-sizing: border-box
  padding: 20px 0px
  text-align: left
  background-color: #e9ecef
  text-align: center
  .btn
    display: inline-block
    margin-bottom: 20px
    font-size: 18px
.main
  width: calc(100% - 60px)
  height: 100%
  overflow-y: scroll
  &::-webkit-scrollbar
    display: none
.table-node-type
  ::v-deep .el-input__inner
    max-width: 90px
    border 0
    color #F56C6C
    font-weight: 700
    font-size: 14px
.dialogue
  .title
    margin-bottom: 10px
    height: 20px
    width: 100%
    background-color: #409EFF
    box-sizing: border-box
    padding-left: 5px
    .con
      font-weight: 700
      width: 100%
      height: 100%
      background-color: #fff
      padding-left: 10px
      line-height: 19px

</style>
